import { useNavigation } from "@react-navigation/native";
import {
  Dimensions,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
  TouchableOpacity,
  View,
} from "react-native";
import Icon from "react-native-vector-icons/AntDesign";
import ModalController from "./ModalController";

const HomeSearchBar = () => {
  const navigation = useNavigation();
  return (
    <View style={styles.headerContainer}>
      <TouchableNativeFeedback
        background={TouchableNativeFeedback.Ripple("#e6e6e6", false)}
        onPress={() => {
          // @ts-ignore
          navigation.navigate("Search");
        }}
      >
        <View style={styles.searchBar}>
          <Icon name="search1" size={20} color="rgba(0,0,0,0.3)" />
          <Text style={styles.searchInput}>搜索内容/角色</Text>
        </View>
      </TouchableNativeFeedback>
      <TouchableOpacity
        onPress={() => {
          ModalController.showModal();
        }}
      >
        <View style={styles.searchButton}>
          <Text style={{ color: "white", fontWeight: "bold" }}>
            我的私密角色
          </Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  headerContainer: {
    width: Dimensions.get("window").width - 30,
    height: 44,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  headerText: {
    fontSize: 18,
    fontWeight: "bold",
  },
  searchBar: {
    backgroundColor: "rgba(0,0,0,0.06)",
    width: Dimensions.get("window").width - 40 - 120,
    height: 36,
    borderRadius: 6,
    justifyContent: "flex-start",
    alignItems: "center",
    paddingHorizontal: 10,
    flexDirection: "row",
  },
  searchInput: { color: "rgba(0,0,0,0.3)", marginLeft: 5, fontSize: 14 },
  searchButton: {
    width: 120,
    height: 36,
    backgroundColor: "#3BC859",
    borderRadius: 6,
    justifyContent: "center",
    alignItems: "center",
    marginLeft: 10,
  },
});

export default HomeSearchBar;
